


{% stylesheet %}


.block_before_after_img .content {
  user-select: none;
  --clip-path-offset: 0px;
  --shadow: 0 5px 15px rgb(26 26 26 / 0.1);
  /* filter: drop-shadow(var(--shadow)); */
  position: relative;
}

.block_before_after_img .subtitle{
  text-align: center;
  font-weight: bold;
  margin-bottom: 15px;
}
@media screen and (min-width: 1150px) {
  .block_before_after_img .content {
    width: 80%;
    margin: 0 auto;
  }
}
.block_before_after_img .content .text {
  font-size: 22px;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .block_before_after_img .content .text {
    font-size: 18px;
  }
}
.block_before_after_img .content .before_img {
  color: var(--text-color1);
}
.block_before_after_img .content .after_img {
  clip-path: inset(0 0 0 calc(var(--drag-position, 50%) + var(--clip-path-offset, 0px)));
  color: var(--text-color2);
}

.block_before_after_img .before-after_cursor{
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  display: flex;
}
.block_before_after_img .content .before-after_cursor .drag {
  left: var(--drag-position, 0px);
  top: 50%;
  touch-action: none;
  transform: translate(calc(-50% + var(--clip-path-offset, 0px)), -50%);
  cursor: grab;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1019607843)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.0588235294));
  will-change: transform;
  place-items: center;
  width: max-content;
  height: 100%;
  display: grid;
  align-items: center;
    position: relative;
}
.block_before_after_img .content .before-after_cursor .drag::before {
  content: "";
  width: 2px;
  background: #fff;
  z-index: -1;
  height: 100%;
  position: absolute;
}
.block_before_after_img .before_img{
  overflow: hidden;
  position: relative;
}
.block_before_after_img .before_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.block_before_after_img .before_img-text{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  padding: 10px;
  box-sizing: border-box;
}
.block_before_after_img .after_img{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 10;
  box-sizing: border-box;
  overflow: hidden;
  
}
.block_before_after_img .after_img-text{
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: end;
  padding: 10px;
  box-sizing: border-box;
  justify-content: end;
}
.block_before_after_img .after_img img{
  width: 100%;
  height: 100%;
  object-fit: cover;
}
{% endstylesheet %}

{% assign data = section.settings %}
{% assign blockId = block_id | default: section.block_id %}

<div class="block_before_after_img" id="block_before_after_img-{{blockId}}">
	<div class="container_wrapper">
	  {% include 'block_title', title: data.title, detail: data.detail %}

	  <div class="content " style="--drag-position: {{data.drag_position}}%;--text-color1: {{data.text_color1}};--text-color2: {{data.text_color2}};">
      <div class="before_img  ">
        {% include 'lazy_img',src: data.before_image.src,alt: data.before_image.alt, file_type: 'banner'%}
        <div class="text before_img-text">
        <span>{{data.before_text}}</span>
        </div>
      </div>
      <div class="after_img ">
        {% include 'lazy_img',src: data.after_image.src,alt: data.after_image.alt, file_type: 'banner' %}
        <div class="text after_img-text">
        <span>{{data.after_text}}</span>
        </div>
      </div>
      <div class="before-after_cursor " id="cursor-{{blockId}}">
        <div class="drag  cursor-grab ">
          <svg role="presentation" focusable="false" width="28" height="35" viewBox="0 0 32 40">
            <path
              d="M0 16C0 7.16344 7.16344 0 16 0C24.8366 0 32 7.16344 32 16V24C32 32.8366 24.8366 40 16 40C7.16344 40 0 32.8366 0 24V16Z"
              fill="#ffffff"></path>
            <path fill="#000000" d="M11 14H13V26H11zM15 14H17V26H15zM19 14H21V26H19z"></path>
          </svg>
        </div>
      </div>
	  </div>
	</div>
</div>

<script>
  $(function () {
    let isDragging = false;
    let offsetX = 0;
    let dom = document.querySelector(`#block_before_after_img-{{blockId}} .content`);
    let dragPosition = parseInt('{{data.drag_position}}') / 100;
    let minX = -dom.clientWidth * dragPosition;
    let maxX = dom.clientWidth * (1 - dragPosition);

    $(`#cursor-{{blockId}} .drag`).on('mousedown', function (event) {
      isDragging = true;
      offsetX = event.pageX - getVariableValue();
    });
    $(`#cursor-{{blockId}}`).on('mousemove', function (event) {
      if (isDragging) {
        let x = Math.max(minX, Math.min(event.pageX - offsetX, maxX));
        dom.style.setProperty('--clip-path-offset', `${x}px`);
        if (event.pageX - offsetX < minX || event.pageX - offsetX > maxX) {
          isDragging = false;
          return;
        }
      }
    });
    $(`#cursor-{{blockId}} .drag`).on('mouseup', function (event) {
      isDragging = false;
    });

    $(`#cursor-{{blockId}} .drag`).on('touchstart', function (event) {
      isDragging = true;
      offsetX = event.originalEvent.touches[0].pageX - getVariableValue();
      event.preventDefault();
    });

    $(`#cursor-{{blockId}}`).on('touchmove', function (event) {
      if (isDragging) {
        let x = Math.max(minX, Math.min(event.originalEvent.touches[0].pageX - offsetX, maxX));
        dom.style.setProperty('--clip-path-offset', `${x}px`);

        if (
          event.originalEvent.touches[0].pageX - offsetX < minX ||
          event.originalEvent.touches[0].pageX - offsetX > maxX
        ) {
          isDragging = false;
          return;
        }
      }
    });

    $(`#cursor-{{blockId}} .drag`).on('touchend', function (event) {
      isDragging = false;
    });

    function getVariableValue() {
      return parseInt(getComputedStyle(dom).getPropertyValue('--clip-path-offset'));
    }
  });
</script>

{% schema %}
{
  "class": "block_before_after_img",
  "is_global": false,
  "icon": "icon-Duibi",
  "name": {
    "zh_CN": "对比图",
    "en_US": "Before/after picture"
  },
  "blocks": [],
  "settings": [
    {
      "type": "card_header",
      "label": {
        "zh_CN": "设置",
        "en_US": "Settings"
      }
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "标题",
        "en_US": "Title"
      },
      "default": "",
      "id": "title"
    },
    {
      "type": "card_text_editor",
      "label": {
        "zh_CN": "描述",
        "en_US": "Description"
      },
      "id": "detail",
      "default": ""
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "前图片",
        "en_US": "Before image"
      },
      "default": {
        "src": "",
        "alt": ""
      },
      "info": {
        "zh_CN": "尺寸建议：1000*500px",
        "en_US": "Size suggested: 1000*500px"
      },
      "id": "before_image"
    },
    {
      "type": "card_image",
      "label": {
        "zh_CN": "后图片",
        "en_US": "After image"
      },
      "default": {
        "src": "",
        "alt": ""
      },
      "info": {
        "zh_CN": "尺寸建议：1000*500px",
        "en_US": "Size suggested: 1000*500px"
      },
      "id": "after_image"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "前图文字",
        "en_US": "Before image text"
      },
      "id": "before_text",
      "default": "Before"
    },
    {
      "type": "card_input",
      "label": {
        "zh_CN": "后图文字",
        "en_US": "After image text"
      },
      "id": "after_text",
      "default": "After"
    },
    {
      "type": "card_slider",
      "label": {
        "zh_CN": "拖动初始位置",
        "en_US": "Drag initial position"
      },
      "id": "drag_position",
      "max": 100,
      "min": 0,
      "unit": "%",
      "default": 39
    },
    {
      "type": "card_header",
      "label": {
        "zh_CN": "颜色设置",
        "en_US": "Color Settings"
      }
    },
    {
      "type": "card_color",
      "id": "text_color1",
      "label": {
        "zh_CN": "前文本颜色",
        "en_US": "Before Text color"
      },
      "default": "#1A1A1A"
    },
    {
      "type": "card_color",
      "id": "text_color2",
      "label": {
        "zh_CN": "后文本颜色",
        "en_US": "After Text color"
      },
      "default": "#1A1A1A"
    }
  ],
  "default": {
    "settings": {
      "subtitle": "",
      "title": "An icon, now wireless!",
      "detail": "",
      "before_image": {
        "src": "https://cn01-cdn.staticsyy.com/uploads/51842/cart/resources/20230817/2d8b9f57d4f6218ed2764181dec949f4.jpg",
        "alt": ""
      },
      "after_image": {
        "src": "https://cn01-cdn.staticsyy.com/uploads/51842/cart/resources/20230817/04aa44d8d356d5b3ad4a1a260c5eb900.jpg",
        "alt": ""
      },
      "before_text": "TWS Headphones",
      "after_text": "Wireless Headphones",
      "drag_position": 39,
      "text_color1": "#1A1A1A",
      "text_color2": "#1A1A1A"
    },
    "blocks": []
  }
}
{% endschema %}
